<template>
  <div class='page grey-stage home'>
    <top-filter :filterOptions="filterOptions" @change-filter="changeFilterValue" ref="topFilter"></top-filter>
    <div class="home-container" ref="container" :style="'padding-top:' + this.scrollerTop + 'px; height:' + this.scrollerHeight + 'px'">
      <section class="sales-target-section">
        <sales-target :target="target" :finishedTarget="finishedTarget" :teamId="teamId"></sales-target>
      </section>
      <section class="sales-performance-section mgt-6">
        <sales-performance :teamId="teamId" :calendar="calendar"  :business-volume="businessVolume" :totalOrderQuantity="totalOrderQuantity" :perCustomerTransaction="perCustomerTransaction" :data="data"></sales-performance>
      </section>
      <!-- <section class="sales-executive mgt-6">
        <sales-executive
          :followUpall = "followUpall"
          :newThread = "newThread"
          :newClient = "newClient"
          :newAudition = "newAudition"
          :clientPercentConversion = "clientPercentConversion" >
        </sales-executive>
      </section> -->
      <section class="sales-executive mgt-6">
        <funnel-model
          :newCustom="data.new_custom"
          :customCare="data.custom_care"
          :reserve="data.reserve"
          :arrive="data.arrive"
          :initialContract="data.initial_contract"
          :renewalContract="data.renewal_contract"
          :calendar="calendar"
          :teamId="teamId"
        ></funnel-model>
      </section>

      <section v-if="this.user.is_manager == 1 || this.user.is_team_manager == 1 || this.user.is_system_manager == 1" class="sales-executive mgt-6">
        <df-model :dfData="dfData" :calendar = "calendar"></df-model>
      </section>
      <section v-if="this.user.is_manager == 1 || this.user.is_team_manager == 1 || this.user.is_system_manager == 1" class="sales-executive mgt-6">
        <is-valid-model :isValidData="isValidData" :calendar = "calendar" :team_id="teamId"></is-valid-model>
      </section>

      <section class="sales-executive mgt-6">
        <month-follow-model
          :followData="followData"
          :calendar = "calendar"
        ></month-follow-model>
      </section>
      <section class="sales-executive mgt-6">
        <analyze-model
          :analyzeData="analyzeData"
          :calendar = "calendar"
        ></analyze-model>
      </section>
    </div>
    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <crm-tabbar activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>
<script>
import crmTabbar from '../components/crm-tabbar'
import salesTarget from '../components/sales-target'
import salesPerformance from '../components/sales-performance'
import salesExecutive from '../components/sales-executive'
import FunnelModel from '../components/funnel-model'
import topFilter from '../components/top-filter'
import crmCover from '../components/crm-cover'
import MonthFollowModel from '../components/month-follow-model'
import DFModel from  '../components/df-model'
import IsValidModel from '../components/is-valid-model'
import AnalyzeModel from '../components/analyze-model'
// import Scroller from 'vue-scroller'
import store from '../store'
import { mapState } from 'vuex'

export default {
  data () {
    let overHeight = document.body.scrollHeight + 22
    return {
      followData:{},
      analyzeData:{},
      dfData:{},
      isValidData:{},
      containerHeight: 'height:' + overHeight + 'px;',
      calendar: '',
      activated: true,
      who: '',
      data: {},
      scrollerHeight: '',
      scrollerTop: '',
      target: 0,
      finishedTarget: 0,
      businessVolume: 0,
      totalOrderQuantity: 0,
      perCustomerTransaction: 0,
      followUpall: 0,
      teamId: '',
      newThread: 0,
      newClient: 0,
      newAudition: 0,
      clientPercentConversion: 0,
      filterOptions: [
        {
          title: '销售简报',
          class: 'txt-indent',
          isShow: false
        },

        {
          title: '本月',
          class: 'width-25 txt-center',
          value: '4',
          checked: '4',
          options: [
            {
              text: '今年',
              value: '0'
            },
            {
              text: '去年',
              value: '1'
            },
            {
              text: '本季度',
              value: '2'
            },
            {
              text: '上季度',
              value: '3'
            },
            {
              text: '本月',
              value: '4'
            },
            {
              text: '上月',
              value: '5'
            },
            {
              text: '本周',
              value: '6'
            },
            {
              text: '上周',
              value: '7'
            },
            {
              text: '今天',
              value: '8'
            },
            {
              text: '昨天',
              value: '9'
            }
          ]
        },

        {
          title: '自己',
          class: 'width-25 txt-center',
          value: '1',
          checked: 'own',
          options: [
            {
              text: '仅自己',
              value: 'own'
            }
          ]
        }
      ]
    }
  },
  components: {
    crmTabbar,
    salesTarget,
    salesPerformance,
    salesExecutive,
    topFilter,
    crmCover,
    FunnelModel,
    MonthFollowModel,
    AnalyzeModel,
    'df-model':DFModel,
    'is-valid-model':IsValidModel
  },

  mounted () {
    this.caculateScroller()
    this.$vux.loading.show({loading: '加载中...'})
    // console.log(this.$refs)
    // this.$refs.my_scroller.resize();
    this.callJsApi('biz.navigation.setTitle', { title: '工作台' })
    if (this.user.is_team_manager) {
      this.isInitTeamFilter = true
      for (const teamId in this.user.my_team_list) {
        this.filterOptions[2].options.push({
          text: this.user.my_team_list[teamId],
          value: teamId
        })
      }
      this.initTeamSelection()
    }
    this.getWorckbenchInfo()
  },

  methods: {
    refresh (iscroll) {
    },
    log () {
    },

    load (iscroll) {
    },
    test () {
    },
    caculateScroller () {
      const winHeight = window.innerHeight
      const filterHeight = this.$refs['topFilter'].$el.offsetHeight
      const tabbarHeight = this.$refs['tabbar'].$el.offsetHeight
      this.scrollerTop = filterHeight
      this.scrollerHeight = winHeight - filterHeight - tabbarHeight
    },
    changeFilterValue (filterOptions) {
      filterOptions[1].options.forEach((range) => {
        if (this.filterOptions[1].checked === range.value) {
          this.filterOptions[1].title = range.text
        }
      })
      filterOptions[2].options.forEach((range) => {
        if (this.filterOptions[2].checked === range.value) {
          this.filterOptions[2].title = range.text
        }
      })
      this.filterOptions = filterOptions
      this.getWorckbenchInfo()
    },
    initTeamSelection () {
      let teamIdList = Object.keys(this.user.my_team_list)
      let teamNameList = Object.values(this.user.my_team_list)
      if (teamIdList.length) {
        let firstTeamId = teamIdList[0]
        let firstTeamTitle = teamNameList[0]
        this.filterOptions[2].value = firstTeamId
        this.filterOptions[2].checked = firstTeamId
        this.filterOptions[2].title = firstTeamTitle
      }
    },
    getWorckbenchInfo (calendar, who) {
      this.$vux.loading.show({loading: '加载中...'})

      if (!calendar) calendar = this.filterOptions[1].checked
      if (!who) who = this.filterOptions[2].checked
      var that = this
      let params = ''
      // 获取工作台信息
      if (who === 'own') {
        params = {calendar, who}
        this.teamId = null
      } else {
        params = {calendar, team_id: who, who: 'team'}
        this.teamId = who
      }
      this.calendar = calendar
      // 获取工作台信息
      store.dispatch('getWorckbenchInfo', params).then((response) => {
        if (response.data.errcode === 0) {
          let res = response.data.results
          this.data = res
          that.target = that.totalTarget || res.target
          that.finishedTarget = res.accomplish

          that.businessVolume = res.order_total
          that.totalOrderQuantity = res.order_count
          that.perCustomerTransaction = res.order_avgprice
          that.followUpall = res.clue_count
          that.newThread = res.new_clue
          that.newClient = res.new_custom
          that.newAudition = res.new_audition
          that.clientPercentConversion = res.custom_conversion_rate
          that.followData  = res.follow_record_analyze
          that.analyzeData = res.custom_bargain_analyze
          that.dfData = res.clue_df
          that.isValidData = res.clue_valids
        } else {
          console.debug('系统出错请联系管理员!', JSON.stringify(response.data))
        }
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 1000)
      }).catch(() => {
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 1000)
      })
    }
  },
  watch: {
    filterOptions (value) {
    },
    user (user) {
      if (!this.isInitTeamFilter && user.is_team_manager) {
        for (const teamId in this.user.my_team_list) {
          this.filterOptions[2].options.push({
            text: this.user.my_team_list[teamId],
            value: teamId
          })
        }
        this.initTeamSelection()
      }
    }
  },
  computed: {
    ...mapState({
      isShowCover: state => state.app.isShowCover,
      totalTarget: state => state.app.target,
      user: state => state.app.user
    })
  }
}
</script>
<style lang="less">

  @import "../less/base";

  section{
    background-color: white;
  }

  .home-container {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .home {
    // -webkit-overflow-scrolling: touch;
  }
</style>
